<template>
  <div id="main">
    <Sidebar />
    <div id="content">
      我是state：{{this.$store.state.count}}
      我是getters:{{this.$store.getters.getStateCount}}
      <input type="button" value="增加" @click="addFun" />
      <input type="button" value="减少" @click="reduceFun" />
      <div onclick="window.location.href='https://time.geekbang.org/course/intro/163?code=5pFEGaDPveAXwugY8ZdWUn2pFvlx0u0pR69Vn9u%2FnDY%3D&amp;utm_term=zeusC0369&amp;utm_source=website&amp;utm_medium=vuezhongwenshequ&amp;utm_campaign=163-presell&amp;utm_content=0318banner'" style="cursor: pointer; display: block; margin-bottom: 10px; background: url(http://static.vue-js.com/FrhMYPI63ONaHPlhPFB1LhTGPxN4) no-repeat left center; background-size: 100%; height: 60px; background-color: #7aa2ee; border-radius: 3px">
      </div>
      <div class="panel">
        <div class="header">
          <a href="/?tab=all" :class="{'current-tab': this.$route.query.tab==='all'|| this.$route.fullPath == '/'}" class="topic-tab">全部</a>
          <a href="/?tab=good" :class="{'current-tab': this.$route.query.tab==='good'}" class="topic-tab ">精华</a>
          <a href="/?tab=weex" :class="{'current-tab': this.$route.query.tab==='weex'}" class="topic-tab ">weex</a>
          <a href="/?tab=share" :class="{'current-tab': this.$route.query.tab==='share'}" class="topic-tab ">分享</a>
          <a href="/?tab=ask" :class="{'current-tab': this.$route.query.tab==='ask'}" class="topic-tab ">问答</a>
          <a href="/?tab=job" :class="{'current-tab': this.$route.query.tab==='job'}" class="topic-tab ">招聘</a>
        </div>
        <div class="inner no-padding">
          <div id="topic_list">
            <div class="cell" v-for="(item,index) in listitem" v-bind:key="index">
              <a class="user_avatar pull-left" :href="'/user/'+item.author.loginname">
                <img :src="item.author.avatar_url" :title="item.author.loginname">
              </a>
              <span class="reply_count pull-left"><span class="count_of_replies" title="回复数">{{item.reply_count}}</span><span class="count_seperator">/</span><span class="count_of_visits" title="点击数">{{item.visit_count}}</span></span>
              <a class="last_time pull-right" :href="'/topic/'+item.id+'#'+item.author_id">
                <img class="user_small_avatar" :src="item.author.avatar_url">
                <span class="last_active_time">{{getTime(item.last_reply_at,item.create_at)}}</span>
              </a>
              <div class="topic_title_wrapper">
                <span v-if="item.top" class="put_top">置顶</span>
                <a class="topic_title" :href="'/topic/'+item.id" title="item.title">
                  {{item.title}}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar'
import {HomeList, HomeListTab} from './uitls/Api'
import TimeFormat from './uitls/Tools'
export default {
  name: 'Home',
  components: {
    Sidebar
  },
  data () {
    return {
      listitem: []
    }
  },
  methods: {
    getAxios () {
      console.log(this.$route.query.tab)
      if (this.$route.query.tab !== undefined) {
        HomeListTab(this.$route.query.tab).then((res) => {
          console.log(res)
          this.listitem = res.data
        }).catch(res => {
          console.log(res)
        })
      } else {
        HomeList().then((res) => {
          console.log(res)
          this.listitem = res.data
        }).catch(res => {
        })
      }
    },
    getTime (fasttime, lasttime) {
      //调用时间函数
      return TimeFormat(fasttime, lasttime)
    },
    addFun () {
      this.$store.dispatch('addFun')
    },
    reduceFun () {
      this.$store.dispatch('reduceFun')
    }
  },
  mounted () {
    this.getAxios()
    //获取路由的参数值
    console.log(this.$route)
  }
}
</script>

<style>

</style>
